<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品详情</title>
    <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <script type="text/javascript" src="../res/layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home" id="adm" style="display: none">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/admin">后台管理</a>
        </p>
        <div class="sn-quick-menu">
            <div id="d1" style="display: none" class="login"><a href="/register" style="color: #0C0C0C">[注册]</a></div>
            <div id="d4" style="display: none" class="login"><a href="/login" style="color: #0C0C0C;margin-left: -10px">
                [登录]</a></div>
            <div id="d2" style="display: none" class="login"><a style="color: #1E9FFF" id="user"></a></div>
            <div id="d3" style="display: none"
                 class="login"><a id="f1" style="color: #0C0C0C" href="javascript:;">退出登录</a></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="/index" title="宠物商城" id="a1">
                    <img style="width: 50%;height: 50%" src="../res/static/img/123.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入宠物名称">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base datails-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="/index" class="active">首页</a>
                    <a href="/shopcart">购物车</a>
                    <a href="/about">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="data-cont-wrap w1200">
        <div class="crumb">
            <a href="/index">首页</a>
            <span>></span>
            <a href="javascript:;">宠物详情</a>
        </div>
        <div class="product-intro layui-clear" id="adddiv">
            <!--通过代码自动生成-->
        </div>
    </div>
</div>
<script type="text/javascript">


    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer;


        var option = {
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always'
            , height: '298'
            , indicator: 'none'
        }

        initIndex();

        initShow();

        function getQueryVariable(variable) {//获取参数id
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] === variable) {
                    return pair[1];
                }
            }
            return false;
        }


        function initShow() {
            var id = getQueryVariable("id");
            $.get("/getGoodsShowById?id=" + id, {}, function (result) {
                $("#adddiv").children().remove();
                $("#adddiv").append("<div class=\"preview-wrap\">\n" +
                    "                <a href=\"javascript:;\"><img style=\"max-width: 400px;max-height: 400px;width: auto;height: auto\" src=" + result.goodsImage + "></a>\n" +
                    "            </div>\n" +
                    "            <div class=\"itemInfo-wrap\">\n" +
                    "                <div class=\"itemInfo\">\n" +
                    "                    <div class=\"title\">\n" +
                    "                        <h4>" + result.goodsName + "</h4>\n" +
                    "                        <span><i class=\"layui-icon layui-icon-rate-solid\"></i>收藏</span>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"summary\">\n" +
                    "                        <p class=\"reference\"><span>品&nbsp;&nbsp;&nbsp;&nbsp;种</span>\n" +
                    "                            <span>" + result.type3Id + "</span>\n" +
                    "                        </p>\n" +
                    "                        <p class=\"activity\"><span>售&nbsp;&nbsp;&nbsp;&nbsp;价</span><strong class=\"price\"><i>￥</i>" +
                    result.goodsPrice + "</strong></p>\n" +
                    "                        <p class=\"address-box\"><span>商&nbsp;&nbsp;&nbsp;&nbsp;家</span><strong class=\"address\">&nbsp;" +
                    result.userId + "</strong>\n" +
                    "                        </p>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"choose-attrs\">\n" +
                    "                        <div class=\"color layui-clear\"><span class=\"title\">颜&nbsp;&nbsp;&nbsp;&nbsp;色</span>\n" +
                    "                            <div class=\"color-cont\"><span class=\"btn\">白色</span> <span class=\"btn active\">粉丝</span></div>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"number layui-clear\"><span class=\"title\">数&nbsp;&nbsp;&nbsp;&nbsp;量</span>\n" +
                    "                            <div class=\"number-cont\"><span class=\"cut btn\">-</span><input\n" +
                    "                                    onkeyup=\"if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\\D/g,'')}\"\n" +
                    "                                    onafterpaste=\"if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\\D/g,'')}\"\n" +
                    "                                    maxlength=\"4\" type=\"\" name=\"\" value=\"1\"><span class=\"add btn\">+</span></div>\n" +
                    "                        </div>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"choose-btns\">\n" +
                    "                        <button class=\"layui-btn layui-btn-primary purchase-btn\" id='shop'>立刻购买</button>\n" +
                    "                        <button class=\"layui-btn  layui-btn-danger car-btn\"><i\n" +
                    "                                class=\"layui-icon layui-icon-cart-simple\" id='addCar'></i>加入购物车\n" +
                    "                        </button>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </div>");
            }, "json");
        }

        function initIndex() {
            $.get("/findLoginInfo", {}, function (r) {
                if (r !== "null") {
                    $('#d1').css('display', 'none');
                    $('#d2').css('display', 'block');
                    $('#d3').css('display', 'block');
                    $('#d4').css('display', 'none');
                    $('#adm').css('display', 'block');
                    $('#a1').css('margin-left', '-86px');
                    $("#user").text("你好," + r + "!");
                    $("#c").css('display', 'inline');
                    $("#admin").css('display', 'inline');
                } else {
                    $('#d1').css('display', 'block');
                    $('#d4').css('display', 'block');
                    $('#d2').css('display', 'none');
                    $('#d3').css('display', 'none');
                    $('#adm').css('display', 'none');
                    $("#c").css('display', 'inline');
                    $('#a1').css('margin-left', '0px');
                    $("#admin").css('display', 'inline');
                }
            }, "text");
        }


        $("#addCar").click(function () {
            alert("加入购物车");
        });

        $("#shop").click(function () {
            alert("立即购买");
        });


        $("#f1").click(function () {
            layer.confirm('确定退出登录吗？', {icon: 3}, function (index) {
                $.get("/loginOut", {}, function (r) {
                    layer.close(index);
                    index = layer.load(1, {shade: [0.1, '#fff']});
                    parent.layer.msg('安全退出中...', {icon: 16, shade: 0.3, time: 5000});
                    $.get("/loginOut", {}, function (r) {
                        layer.closeAll('loading');
                        parent.layer.msg('退出成功！', {
                            icon: 1, time: 1000, shade: 0.2, end: function () {
                                window.location.reload();
                            }
                        });
                        layer.close(index);
                    });
                });
            });
        });

        carousel.render(option);

    });


</script>


</body>
</html>